<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus"
import { reqAllPermissionAPI, reqAddOrUpdatePermissionAPI, reqDeletePermissionAPI } from "@/apis/acl/menu"
import type { Permisston, MenuParams } from "@/apis/acl/menu/type"
//储存全部权限接口数据
const allPermission = ref<Permisston[]>([])
const getAllPermission = async () => {
    const result = await reqAllPermissionAPI()
    if (result.code == 200) {
        allPermission.value = result.data
    }
}
onMounted(() => {
    getAllPermission()
})
//控制dialog对话框的显示与隐藏
const dialogVisible = ref(false)
//收集表单数据和实例
const form = ref<any>()
let MenuData = ref<MenuParams>({
    id: '',
    pid: '',
    name: '',
    code: '',
    level: '',
})
//点击添加按钮
const addPermisstion = (row: Permisston) => {
    //清空表单数据
    MenuData.value = {
        id: '',
        pid: '',
        name: '',
        code: '',
        level: '',
    }
    dialogVisible.value = true
    MenuData.value.level = row.level + 1
    MenuData.value.pid = (row.id as number)

}
//点击修改按钮
const updatePermisstion = (row: Permisston) => {
    dialogVisible.value = true
    MenuData.value = row
}
//点击删除权限按钮
const deletePermisstione = async (row: Permisston) => {
    //点击删除按钮后，发送删除接口
    const result: any = await reqDeletePermissionAPI(row.id as number)
    if (result.code === 200) {
        ElMessage.success('删除成功')
        getAllPermission()
    } else {
        ElMessage.error('删除失败')
    }
}
//表单效验
const rules = {
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入权限值', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    ]
}
//点击表单保存按钮
const save = async () => {
    let result = await reqAddOrUpdatePermissionAPI(MenuData.value)
    if (result.code === 200) {
        ElMessage.success(MenuData.value.id ? '修改成功' : '添加成功')
        dialogVisible.value = false
        getAllPermission()
    } else {
        ElMessage.error(MenuData.value.id ? '修改失败' : '添加失败')
    }
}
</script>
<template>
    <el-table border row-key="id" :data="allPermission">
        <el-table-column label="名称" align="center" prop="name"></el-table-column>
        <el-table-column label="权限值" align="center" prop="code"></el-table-column>
        <el-table-column label="修改时间" align="center" prop="updateTime"></el-table-column>
        <el-table-column label="操作" align="center">
            <template #="{ row }">
                <el-button type="primary" size="small" :disabled="row.level === 4"
                    @click="addPermisstion(row)">添加</el-button>
                <el-button type="primary" size="small" :disabled="row.level === 1"
                    @click="updatePermisstion(row)">编辑</el-button>
                <el-button type="danger" size="small" @click="deletePermisstione(row)"
                    :disabled="row.level === 1">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- dialog对话框 -->
    <el-dialog v-model="dialogVisible" width="50%">
        <template #header>
            <span>{{ MenuData.id ? '修改' : '添加' }}</span>
        </template>
        <template #default>
            <el-form :rules="rules">
                <el-form-item label="名称" label-width="100px">
                    <el-input v-model="MenuData.name"></el-input>
                </el-form-item>
                <el-form-item label="权限值" label-width="100px">
                    <el-input v-model="MenuData.code"></el-input>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
        </template>
    </el-dialog>
</template>